<template>
	<div class="login_view">
		<div class="login_container">
			<!-- 左侧背景区域 -->
			<div class="login_left">
				<div class="left_content">
					<div class="stats_cards">
						<div class="stat_card income">
							<div class="card_label">创业基金</div>
							<div class="card_value">¥40,832.32</div>
							<div class="card_change">13.8% <span class="up">↑</span> 较上月增长</div>
						</div>
						<div class="stat_card platform">
							<!-- <div class="platform_icon amazon"></div> -->
							<div class="stat_title">项目展示</div>
							<div class="stat_value">3259</div>
							<div class="stat_change">6.22% <span class="up">↑</span> 较上月增长</div>
						</div>
						<div class="stat_card platform">
							<!-- <div class="platform_icon shopify"></div> -->
							<div class="stat_title">新增创业团队</div>
							<div class="stat_value">218</div>
							<div class="stat_change">8.9% <span class="up">↑</span> 较上月增长</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 右侧登录表单区域 -->
			<div class="login_right">
				<el-form :model="loginForm" class="login_form">
					<div class="logo-title-wrapper">
						<img src="@/assets/logo.png" alt="logo" class="logo" />
						<div class="title">创业灯塔-齐学创"青年大学生创业生涯规划智慧云平台登录</div>
					</div>
					<div class="form-content">
						<!-- 密码登录表单 -->
						<template v-if="loginType==1">
							<div class="form-group" v-if="userList.length>1">
								<label class="form-label">用户类型：</label>
								<el-select v-model="loginForm.role" placeholder="请选择用户类型">
									<el-option v-for="(item,index) in userList" :label="item.roleName" :value="item.roleName"></el-option>
								</el-select>
							</div>
							<div class="form-group">
								<label class="form-label">账号：</label>
								<input class="form-input" v-model="loginForm.username" name="username" placeholder="请输入账号" />
							</div>
							<div class="form-group">
								<label class="form-label">密码：</label>
								<input class="form-input" type="password" v-model="loginForm.password" placeholder="请输入密码" @keydown.enter.native="handleLogin" />
							</div>
						</template>
						<!-- 短信验证码登录表单 -->
						<template v-else>
							<div class="form-group">
								<label class="form-label">手机号：</label>
								<input class="form-input" v-model="loginForm.mobile" name="mobile" placeholder="请输入手机号" />
							</div>
							<div class="form-group">
								<label class="form-label">验证码：</label>
								<div class="verification-code-wrapper">
									<input class="form-input code-input" v-model="loginForm.code" name="code" placeholder="请输入验证码" />
									<el-button class="send-code-btn" :disabled="countdown > 0" @click="sendVerificationCode">
										{{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
									</el-button>
								</div>
							</div>
						</template>
						<div class="forget-wrapper">
							<el-checkbox v-model="rememberMe">记住我</el-checkbox>
						</div>
						<div class="login-wrapper">
							<el-button class="login" @click="loginType === 1 ? handleLogin() : handleSmsLogin()">登录</el-button>
						</div>
						<div class="other-login-options">
							<span class="option-link" @click="switchLoginType">{{ loginType==1 ? '短信验证码登录' : '密码登录' }}</span>
						</div>
						<div class="register-hint">
							没有账号？ <span class="signup-link" @click="showRegisterOptions = !showRegisterOptions">立即注册</span>
						</div>
						<div class="register-wrapper" v-if="showRegisterOptions">
							<el-button class="register" @click="handleRegister('chuangyezhe')">注册创业者</el-button>
							<el-button class="register" @click="handleRegister('daoshi')">注册导师</el-button>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		useStore
	} from 'vuex';
	import { ElMessageBox, ElMessage } from 'element-plus'
	const store = useStore()
	import menu from '@/utils/menu'
	const userList = ref([])
	const menus = ref([])
	const loginForm = ref({
		role: '',
		username: '',
		password: '',
		mobile: '',
		code: ''
	})
	const tableName = ref('')
	const loginType = ref(1)
	const rememberMe = ref(false)
	const showRegisterOptions = ref(false)
	const countdown = ref(0)
	let timer = null
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	//注册
	const handleRegister = (tableName) => {
		context?.$router.push(`/${tableName}Register`)
	}
	// 显示角色选择对话框
	const showRoleSelectionDialog = (roles) => {
		return new Promise((resolve) => {
			ElMessageBox.confirm(
				'您有多个角色，请选择要登录的角色',
				'选择角色',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'info',
					showCancelButton: true,
					showInput: true,
					inputType: 'select',
					inputValue: roles[0],
					inputPlaceholder: '请选择角色',
					inputOptions: roles.map(role => ({
						label: role,
						value: role
					}))
				}
			).then(({ value }) => {
				resolve(value);
			}).catch(() => {
				resolve(null);
			});
		});
	};
	// 处理登录成功
	const handleLoginSuccess = (response) => {
		context?.$toolUtil.storageSet("frontToken", response.token);
		context?.$toolUtil.storageSet("frontRole", loginForm.value.role);
		context?.$toolUtil.storageSet("frontSessionTable", tableName.value);
		store.dispatch('user/getSession')
		let path = context?.$toolUtil.storageGet('toPath')
		if (path && path!='/login') {
			context?.$router.push(path)
			context?.$toolUtil.storageRemove('toPath')
			return
		}
		context?.$router.push(`/index/home`)
	};
	// 密码登录
	const handleLogin = async () => {
		if (!loginForm.value.username) {
			ElMessage.error('请输入用户名');
			return;
		}
		if (!loginForm.value.password) {
			ElMessage.error('请输入密码');
			return;
		}
		if (userList.value.length > 1) {
			if (!loginForm.value.role) {
				ElMessage.error('请选择角色');
				return;
			}
			for (let i = 0; i < menus.value.length; i++) {
				if (menus.value[i].roleName == loginForm.value.role) {
					tableName.value = menus.value[i].pathName || menus.value[i].tableName;
				}
			}
		} else {
			tableName.value = userList.value[0].pathName || userList.value[0].tableName;
			loginForm.value.role = userList.value[0].roleName;
		}

		try {
			const response = await context?.$http({
				url: `/${tableName.value}/login`,
				method: 'post',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: new URLSearchParams({
					username: loginForm.value.username,
					password: loginForm.value.password
				}).toString()
			});
			
			if (response.data.code === 0) {
				handleLoginSuccess(response.data);
			} else if (response.data.code === 1 && response.data.roles && response.data.roles.length > 1) {
				const role = await showRoleSelectionDialog(response.data.roles);
				if (role) {
					const roleResponse = await context?.$http({
						url: `/${tableName.value}/login`,
						method: 'post',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						data: new URLSearchParams({
							username: loginForm.value.username,
							password: loginForm.value.password,
							role: role
						}).toString()
					});
					if (roleResponse.data.code === 0) {
						handleLoginSuccess(roleResponse.data);
					} else {
						ElMessage.error(roleResponse.data.msg || '登录失败');
					}
				} else {
					ElMessage.warning('登录已取消');
				}
			} else {
				ElMessage.error(response.data.msg || '登录失败');
			}
		} catch (error) {
			console.error('登录失败:', error);
			ElMessage.error('登录失败，请稍后重试');
		}
	};
	// 短信验证码登录
	const handleSmsLogin = async () => {
		// 验证手机号格式
		const mobilePattern = /^1[3-9]\d{9}$/;
		if (!loginForm.value.mobile || !mobilePattern.test(loginForm.value.mobile)) {
			ElMessage.error('请输入正确的手机号');
			return;
		}
		
		if (!loginForm.value.code) {
			ElMessage.error('请输入验证码');
			return;
		}

		try {
			const response = await context?.$http({
				url: '/common/smsLogin',
				method: 'post',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: new URLSearchParams({
					phone: loginForm.value.mobile,
					code: loginForm.value.code,
					loginType: 'front'
				}).toString()
			});
			
			if (response.data.code === 0) {
				// 短信登录成功，直接存储token和相关信息
				context?.$toolUtil.storageSet("frontToken", response.data.token);
				context?.$toolUtil.storageSet("frontSessionTable", response.data.tableName || '');
				store.dispatch('user/getSession');
				let path = context?.$toolUtil.storageGet('toPath');
				if (path && path!='/login') {
					context?.$router.push(path);
					context?.$toolUtil.storageRemove('toPath');
					return;
				}
				context?.$router.push(`/index/home`);
			} else {
				ElMessage.error(response.data.msg || '登录失败');
			}
		} catch (error) {
			console.error('登录失败:', error);
			ElMessage.error(error.response?.data?.msg || '登录失败，请稍后重试');
		}
	};
	//获取菜单
	const getMenu= async ()=> {
		let arr = menu.list()
		if(!arr){
			let res = await context?.$http.get("menu/list")
			context?.$toolUtil.storageSet("menus", res.data.data.list[0].menujson);
			arr = JSON.parse(res.data.data.list[0].menujson)
		}
		menus.value = arr
		for (let i = 0; i < menus.value.length; i++) {
			if (menus.value[i].hasFrontLogin=='是' && menus.value[i].tableName !== 'fuzeren') {
				userList.value.push(menus.value[i])
			}
		}
	}
	//初始化
	const init = async () => {
		await getMenu();
		loginForm.value.role = userList.value[0].roleName
	}
	onMounted(()=>{
		init()
	})
	//切换登录方式
	const switchLoginType = () => {
		loginType.value = loginType.value === 1 ? 2 : 1;
		// 清空表单
		loginForm.value = {
			role: '',  // 完全清空角色信息
			username: '',
			password: '',
			mobile: '',
			code: ''
		};
	};
	// 发送验证码
	const sendVerificationCode = async () => {
		// 验证手机号
		const mobilePattern = /^1[3-9]\d{9}$/;
		if (!loginForm.value.mobile || !mobilePattern.test(loginForm.value.mobile)) {
			context?.$toolUtil.message('请输入正确的手机号', 'error');
			return;
		}

		// 获取用户类型对应的表名
		if (userList.value.length > 1) {
			for (let i = 0; i < menus.value.length; i++) {
				if (menus.value[i].roleName == loginForm.value.role) {
					tableName.value = menus.value[i].pathName || menus.value[i].tableName;
				}
			}
		} else {
			tableName.value = userList.value[0].pathName || userList.value[0].tableName;
			loginForm.value.role = userList.value[0].roleName;
		}

		try {
			const res = await context?.$http({
				url: '/common/sendLoginSmsCode',
				method: 'get',
				params: {
					mobile: loginForm.value.mobile,
					loginType: 'front'
				}
			});
			
			if (res.data.code === 0) {
				context?.$toolUtil.message('验证码发送成功，请注意查收', 'success');
				countdown.value = 60;
				clearInterval(timer);
				timer = setInterval(() => {
					countdown.value--;
					if (countdown.value <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			} else {
				context?.$toolUtil.message(res.data.msg || '验证码发送失败', 'error');
			}
		} catch (error) {
			context?.$toolUtil.message(error.message || '验证码发送失败', 'error');
		}
	};
	//组件卸载时清除定时器
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer);
		}
	});
</script>

<style lang="scss" scoped>
.login_view {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f5f5f5;
	padding: 0;
}

.login_container {
	display: flex;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* 左侧背景区域样式 */
.login_left {
	flex: 1;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
	position: relative;
	overflow: hidden;
}

.left_content {
	width: 100%;
	max-width: 600px;
	z-index: 2;
}

.stats_cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
}

.stat_card {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 20px;
	color: white;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.stat_card:hover {
	transform: translateY(-5px);
}

.income {
	background: rgba(255, 255, 255, 0.2);
}

.card_label {
	font-size: 14px;
	opacity: 0.8;
	margin-bottom: 8px;
}

.card_value {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 8px;
}

.card_change {
	font-size: 14px;
	opacity: 0.8;
}

.up {
	color: #4ade80;
}

.platform {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* 修改为左对齐 */
	text-align: left; /* 修改为左对齐 */
}

.stat_title {
	font-size: 16px;
	margin-bottom: 8px;
	text-align: left; /* 添加左对齐 */
}

.stat_value {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 8px;
	text-align: left; /* 添加左对齐 */
}

.stat_change {
	font-size: 14px;
	opacity: 0.8;
	text-align: left; /* 添加左对齐 */
}

.platform_icon {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
}

.amazon {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FF9900" d="M24.707,7.189c0-1.496,0.13-2.733-0.713-4.055c-0.737-1.088-1.932-1.764-3.241-1.764 c-1.806,0-3.834,1.321-3.834,4.292c0,4.005,3.691,4.731,7.788,4.731V7.189z M26.285,22.201c-0.542,0.098-1.252,0.174-2.079,0.174 c-1.325,0-2.682-0.273-3.951-0.866c-2.747-1.273-4.652-3.87-4.652-7.571c0-3.933,2.447-7.904,7.366-7.904 c1.761,0,3.319,0.415,4.518,1.199c1.37,0.882,2.281,2.079,2.803,3.435c0.29,0.784,0.439,1.766,0.439,2.576v2.927 c0,1.98,0.12,3.609,0.933,5.01c0.702,1.19,1.807,1.93,2.837,2.399c0.193,0.088,0.249,0.229,0.069,0.43 c-0.7,0.93-1.933,2.651-2.623,3.611c-0.193,0.261-0.425,0.271-0.647,0.096c-0.966-0.796-1.136-1.167-1.662-1.931 c-0.426,0.425-0.87,0.812-1.359,1.126c-1.222,0.784-2.623,1.199-4.054,1.199c-2.079,0-3.951-1.273-3.951-3.819 c0-1.98,1.088-3.323,2.623-3.989c1.37-0.604,3.241-0.702,4.71-0.866V22.201z"/><path fill="%23FF9900" d="M30.651,40.602c-9.47,4.452-19.466,6.834-29.188,6.834c-13.813,0-26.262-5.096-35.664-13.575 c-0.743-0.677-0.077-1.598,0.814-1.072c10.189,5.924,22.763,9.487,35.762,9.487c8.773,0,18.426-1.818,27.313-5.574 C31.12,36.226,32.038,39.344,30.651,40.602z M34.566,36.174c-1.212-1.55-8.001-0.734-11.064-0.37 c-0.929,0.116-1.069-0.697-0.231-1.286c5.424-3.805,14.318-2.707,15.359-1.429c1.042,1.287-0.272,10.195-5.344,14.44 c-0.78,0.649-1.519,0.306-1.173-0.558C33.273,44.215,35.776,37.724,34.566,36.174z"/></svg>');
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

.shopify {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%2395BF47" d="M35.893,13.885c-0.078-0.705-0.78-0.979-1.251-1.001c-0.157-0.022-3.483-0.257-3.483-0.257 s-2.306-2.285-2.54-2.518c-0.251-0.234-0.731-0.162-0.921-0.112c-0.022,0-0.436,0.134-1.045,0.335 c-0.627-1.796-1.729-3.426-3.661-3.426h-0.173c-0.545-0.692-1.229-1.001-1.818-1.001c-4.527,0-6.694,5.65-7.375,8.518 c-1.762,0.545-3.017,0.937-3.172,0.993c-0.982,0.313-1.013,0.335-1.14,1.274C9.22,17.344,5,41.378,5,41.378l23.999,4.516 l13.001-3.21C42,42.684,35.893,13.885,35.893,13.885z M28.585,12.201c-0.509,0.156-1.079,0.335-1.673,0.513 c0-0.022-0.876-2.452-1.363-3.842C27.256,9.32,28.363,11.211,28.585,12.201z M24.15,9.375c0.487,1.396,1.396,3.987,1.396,3.987 c-1.229,0.38-2.43,0.747-3.527,1.095C22.82,11.872,23.663,10.254,24.15,9.375z M21.172,7.522c0.313,0,0.57,0.112,0.792,0.335 c-1.946,0.915-4.033,3.198-4.908,7.77c-1.285,0.402-2.518,0.781-3.661,1.14C14.366,12.469,16.645,7.522,21.172,7.522z"/><path fill="%235E8E3E" d="M34.642,12.884c-0.157-0.022-3.483-0.257-3.483-0.257s-2.306-2.285-2.54-2.518 c-0.095-0.089-0.223-0.134-0.358-0.156l-1.858,38.975l13.001-3.21c0,0-6.107-28.799-6.107-28.799 C35.815,13.18,35.113,12.906,34.642,12.884z"/><path fill="%23FFFFFF" d="M21.879,19.345l-1.564,4.637c0,0-1.374-0.737-3.054-0.737c-2.474,0-2.597,1.552-2.597,1.942 c0,2.138,5.584,2.955,5.584,7.967c0,3.938-2.495,6.475-5.853,6.475c-4.034,0-6.093-2.517-6.093-2.517l1.079-3.583 c0,0,2.125,1.818,3.909,1.818c1.162,0,1.652-0.915,1.652-1.586c0-2.774-4.583-2.897-4.583-7.453c0-3.827,2.751-7.533,8.29-7.533 C20.883,18.775,21.879,19.345,21.879,19.345z"/></svg>');
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

.stat_title {
	font-size: 16px;
	margin-bottom: 8px;
}

.stat_value {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 8px;
}

.stat_change {
	font-size: 14px;
	opacity: 0.8;
}

/* 右侧登录表单区域样式 */
.login_right {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
}

.login_form {
	width: 400px;
	padding: 40px;
	background: #FFFFFF;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.logo-title-wrapper {
	text-align: center;
	margin-bottom: 20px;
}

.logo {
	width: 60px;
	height: 60px;
	margin-bottom: 16px;
}

.title {
	font-size: 24px;
	color: #303133;
	line-height: 1.4;
	font-weight: 600;
}

.form-content {
	margin-top: 20px;
}

.form-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.form-label {
	font-size: 14px;
	color: #606266;
	margin-bottom: 8px;
}

.form-input {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	transition: border-color 0.2s;
	
	&:focus {
		outline: none;
		border-color: #409EFF;
	}
}

.forget-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 16px;
}

.login-wrapper {
	margin: 20px 0;
}

.el-button.login {
	border: none;
	width: 100%;
	border-radius: 0;
	height: 50px;
	background: #1e88e5 !important;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	border-radius: 10px;
}

.login-divider {
	position: relative;
	text-align: center;
	margin: 20px 0;
	
	&:before, &:after {
		content: '';
		position: absolute;
		top: 50%;
		width: 40%;
		height: 1px;
		background: #EBEEF5;
	}
	
	&:before {
		left: 0;
	}
	
	&:after {
		right: 0;
	}
	
	span {
		display: inline-block;
		padding: 0 10px;
		background: white;
		position: relative;
		z-index: 1;
		color: #909399;
		font-size: 14px;
	}
}

.social-login {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
}

.social-btn {
	flex: 1;
	height: 40px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.3s;
	
	&:hover {
		background: #f5f7fa;
	}
}

.google-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/><path fill="%23FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/><path fill="%234CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/><path fill="%231976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/></svg>');
	background-size: contain;
}

.apple-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>');
	background-size: contain;
}

.register-hint {
	text-align: center;
	margin: 16px 0;
	font-size: 14px;
	color: #606266;
}

.signup-link {
	color: #409EFF;
	cursor: pointer;
	font-weight: 600;
	
	&:hover {
		text-decoration: underline;
	}
}

.register-wrapper {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.el-button.register {
	flex: 1;
	height: 50px;
	border: 0px solid var(--theme);
	border-radius: 10px;
	color: #fff;
	margin: 0;
	background: #1e88e5 !important;
}

.el-button.forget {
	padding: 0;
	border: none;
	color: #909399;
	
	&:hover {
		color: #409EFF;
	}
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.login_view form.el-form.login_form {
	animation: fadeIn 0.5s ease-out;
}

.other-login-options {
	margin-top: 15px;
	text-align: center;
	font-size: 14px;
}

.option-link {
	color: #4a6cf7;
	cursor: pointer;
	transition: color 0.3s;
}

.option-link:hover {
	color: #2a4cd7;
	text-decoration: underline;
}

.verification-code-wrapper {
	position: relative;
	width: 100%;
	
	.code-input {
		width: 100%;
		padding-right: 120px;
	}
	
	.send-code-btn {
		position: absolute;
		right: 0;
		top: 0;
		height: 40px;
		padding: 0 15px;
		background: #1e88e5;
		color: #fff;
		border: none;
		border-radius: 0 4px 4px 0;
		
		&:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
	}
}
</style>
<style>
.login_view {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.login_view form.el-form.login_form {
	width: 500px;
	row-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	background-position: right;
	color: #000;
	justify-content: center;
	position: relative;
	border-radius: 30px 30px 30px 30px;
	top: -50px;
}

.login_view .title_view {width: 100%;order: 1;font-size: 24px;text-align: center;color: #000;line-height: 40px;border-radius: 10px;font-size: 30px;}

.login_view .tabView {
	order: 2;
	display: flex;
	width: 100%;
	height: 50px;
	border-radius: 6px;
	overflow: hidden;
}

.login_view .tab {line-height: 50px;height: 50px;background: #E2E2E2;color: #959595;text-align: center;font-weight: 600;}

.login_view .tab.tabActive {
	background: var(--theme);
	color: #fff;
}

.login_view .list_item {
	order: 3;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	
	align-items: center;
	
	
	border-radius: 6px;
	position: relative;
}

.login_view .listCode_view {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	
	
	border-radius: 6px;
	position: relative;
	
	
	width: 100%;
}

.login_view .face {
	order: 5;
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 50px;
	text-align: center;
	background: var(--theme1);
	border-radius: 10px;
}

.login_view .btn_view {
	order: 5;
	position: relative;
	margin-top: 40px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.login_view .list_label {
	color: var(--theme);
	width: 110px;
	position: relative;
	z-index: 1;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: center;
	position: absolute;
	left: -110px;
}

.login_view input.list_inp {
	flex: 1;
	border: none;
	line-height: 48px;
	padding-left: 10px;
	border: 1px solid #C7C7C7;
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	border: 1px solid var(--theme);
}

.login_view .listCode_label {
	width: 110px;
	color: var(--theme);
	flex-shrink: 0;
	position: relative;
	z-index: 0;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: center;
	position: absolute;
	left: -110px;
}

.login_view input.listCode_inp {
	flex: 1;
	line-height: 48px;
	width: 145px;
	padding: 0 10px;
	margin-right: 120px;
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	border: 1px solid var(--theme);
}

.login_view .listCode_btn {
	height: 50px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	width: 110px;
	border-radius: 0;
	background: var(--theme1);
	justify-content: center;
	border-radius: 10px;
	position: absolute;
	right: 0;
	bottom: 0;
}

.login_view .el-button.login {
	border: none;
	width: 100%;
	border-radius: 0;
	height: 50px;
	background: var(--theme1);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	border-radius: 10px;
}

.login_view .el-button.forget {
	width: 100px;
	background: none;
	border: none;
	color: inherit;
}

.login_view button.el-button.register {
	height: 50px;
	flex: 1;
	border: 0px solid var(--theme);
	border-radius: 10px;
	color: #fff;
	margin: 0;
	background: #66B1FF;
}

.login_view button.el-button.register:hover {
	background: #409EFF;
}

.login_view .list_type {
	order: 1;
	display: flex;
	
	align-items: center;
	width: 100%;
	border-radius: 6px;
	border: 0px solid var(--theme);
	justify-content: center;
	flex-wrap: wrap;
	
}

.login_view .el-select {
	flex: 1;
	line-height: 48px;
	border: 1px solid var(--theme)!important;
	color: #000;
	border-radius: 10px;
	padding: 0 10px;
	height: 50px;
	background: rgba(255,255,255,0.5);
}

.login_view .forget-wrapper {order: 6;width: 100%;text-align: center;color: var(--theme);}

.login_view .login-wrapper {
	order: 7;
	width: 100%;
}

.login_view .face-wrapper {
	order: 8;
	width: 100%;
}

.login_view .register-wrapper {
	order: 9;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}



.login_view .el-radio__input.is-checked .el-radio__inner {
	background: var(--theme);
	border-color: var(--theme);
}

.login_view .el-radio__input.is-checked+.el-radio__label {
	color: var(--theme);
}

.login_view .el-radio__inner:hover {
	border-color: var(--theme);
}
</style>